<template>
  <a-card :bordered="false">
    <a-col :span="24">
      <a-spin tip="Loading..." :spinning="spinning">

        <div>
          <a-row>
            <a-col :span="24">
              <p>
                <a-divider orientation="left">营业执照</a-divider>
              </p>
            </a-col>
            <a-col :span="6"></a-col>
            <!-- 营业执照 -->
            <a-col :span="18">
              <template>
                  <div style="float: left;width:200px;height:200px;margin-right: 10px;margin: 0 8px 8px 0;">
                    <div
                      style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                      <img style="width: 100%;" :src="zzimg" :preview="dataSource[0].key">
                    </div>
                  </div>
              </template>
            </a-col>
          </a-row>
        </div>

        <div>
          <a-row>
            <a-col :span="24">
              <p>
                <a-divider orientation="left">身份证正反面</a-divider>
              </p>
            </a-col>
            <a-col :span="6"></a-col>
            <!-- 身份证正反面 -->
            <a-col :span="18">
              <template>
                <div style="float: left;width:200px;height:200px;margin-right: 10px;margin: 0 8px 8px 0;">
                  <div
                    style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                    <img style="width: 100%;" :src="cardimgjust" :preview="dataSource[1].key">
                  </div>
                </div>
                <div style="float: left;width:200px;height:200px;margin-right: 10px;margin: 0 8px 8px 0;">
                  <div
                    style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                    <img style="width: 100%;" :src="cardimgback" :preview="dataSource[1].key">
                  </div>
                </div>
              </template>
            </a-col>
          </a-row>
        </div>

        <div>
          <a-row>
            <a-col :span="24">
              <p>
                <a-divider orientation="left">道路运输许可证照片</a-divider>
              </p>
            </a-col>
            <a-col :span="6"></a-col>
            <!-- 道路运输许可证照片 -->
            <a-col :span="12">
              <template>
                <div style="float: left;width:200px;height:200px;margin-right: 10px;margin: 0 8px 8px 0;">
                  <div
                    style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                    <img style="width: 100%;" :src="rtpcardimg" :preview="dataSource[2].key">
                  </div>
                </div>
              </template>
            </a-col>
          </a-row>
        </div>

      </a-spin>
      <p></p>
    </a-col>
  </a-card>

</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import ARow from 'ant-design-vue/es/grid/Row'
  import store from '@/store'

  export default {
    name: 'ImagPreview',
    components: {
      ARow
    },
    data() {
      return {
        description: '图片预览页面',
        spinning:false,
        zzimg:'',
        cardimgjust:'',
        cardimgback:'',
        rtpcardimg:'',
        //数据集
        dataSource: [{
          key:0,
          fileDetails:[
          ]
        },{
          key:1,
          fileDetails:[
          ]
        },{
          key:2,
          fileDetails:[
          ]
        }
        ],
        url: {
          queryByLoginname: "/customer/tbCustomer/queryByLoginname",
        }
      }
    },
    created() {
      const that = this;
      that.initialization();
    },
    methods: {
      initialization() {
        const that = this;
        let loginname = store.getters.userInfo.username;
        //loginname = '15640251323';//测试数据
        getAction(this.url.queryByLoginname,{loginname: loginname}).then((res)=>{
          if(res.success){
            that.zzimg=res.result.zzimg;//营业执照照片
            that.cardimgjust=res.result.cardimgjust;//身份证扫描件
            that.cardimgback=res.result.cardimgback;//身份证背面
            that.rtpcardimg=res.result.rtpcardimg;//道路运输许可证照片
          }
        })
        }
      }
  }
</script>
<style scoped>
  .table-operator {
    margin-bottom: 10px
  }

  .clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
    width: 10px !important;
  }

  .clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: #1890FF !important;
  }
</style>